<template>
  <div class="container">
			<div class="drop"></div>
			<div class="drop"></div>
			<div class="drop"></div>
			<div class="collection">
			</div>
			<span>{{current}}%</span>
		</div>
</template>

<script>
export default {
  props:{
    current:{
      type:Number,
      default:0
    }
  }
}
</script>

<style lang="less" scoped>
.tip{
	color: #4EBBF7;
	font-size: 12px ;
}
.container{
			position: absolute !important;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			height: 200px;
			width: 100px;
			right: 0;
			bottom: 0;
			background-color: rgba(255,255,255,.6);
			filter: contrast(30);
			z-index: 99;
		}
		.drop{
			position: absolute;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: cyan;
			filter: blur(10px);
			animation: drop 2s linear infinite;
			opacity: 0;
		}
		.drop:nth-child(1){
			
		}
		.drop:nth-child(2){
			animation-delay: 1s;
		}
		.drop:nth-child(3){
			animation-delay: 1.5s;
		}
		.collection{
			width: 40px;
			height: 40px;
			background-color: #00FFFF;
			border-radius: 50%;
			filter: blur(5px);
			animation: collection 2s linear infinite;
		}
		span{
			position: absolute;
      font-size: 17px;
      font-weight: 900;
		}
		
		@keyframes drop{
			0%{
				opacity: 1;
				transform: scale(1) translateY(-90px);
			}
			50%{
				opacity: 1;
				transform: scale(0.6) translateY(-40px);
			}
			100%{
				opacity: 1;
				transform: scale(0.4);
			}
		}
		@keyframes collection{
			0%{
				transform: scale(1);
			}
			50%{
				transform: scale(1.2) rotate(180deg);
				width:42px;
			}
			100%{
				transform: scale(1) rotate(360deg);
			}
		}
</style>